//创建并初始化axios实例
const instance = axios.create({
    baseURL: "http://localhost:8080/api", //服务器接口
    headers: {
      "Content-Type": "application/json", //请求数据类型
    },
  });

  //请求异常时的响应提示
  function htmlizeResponse(res) {
    return `<div class="alert alert-secondary mt-2" role="alert"><pre>` + JSON.stringify(res, null, 2) + "</pre></div>";
  }
  
  //访问所有数据
  async function getAllData() {
    let resultElement = document.getElementById("getResult");
    resultElement.innerHTML = "";
  
    try {
      const res = await instance.get("/tutorials");
  
      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };
  
      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
  
  //根据ID查询数据
  async function getDataById() {
    let resultElement = document.getElementById("getResult");
    resultElement.innerHTML = "";
  
    const id = document.getElementById("get-id").value;
  
    if (id) {
      try {
        const res = await instance.get(`/tutorials/${id}`);
  
        const result = {
          status: res.status + "-" + res.statusText,
          headers: res.headers,
          data: res.data,
        };
  
        resultElement.innerHTML = htmlizeResponse(result);
      } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err);
      }
    }
  }
  
  //根据Title查询数据
  async function getDataByTitle() {
    let resultElement = document.getElementById("getResult");
    resultElement.innerHTML = "";
  
    const title = document.getElementById("get-title").value;
  
    if (title) {
      try {
        // const res = await instance.get(`/tutorials?title=${title}`);
        const res = await instance.get("/tutorials", {
          params: {
            title: title
          }
        });
  
        const result = {
          status: res.status + "-" + res.statusText,
          headers: res.headers,
          data: res.data,
        };
  
        resultElement.innerHTML = htmlizeResponse(result);
      } catch (err) {
        resultElement.innerHTML = htmlizeResponse(err);
      }
    }
  }
  
  //新增一个记录
  async function postData() {
    let resultElement = document.getElementById("postResult");
    resultElement.innerHTML = "";
  
    const title = document.getElementById("post-title").value;
    const description = document.getElementById("post-description").value;
  
    try {
      const res = await instance.post("/tutorials", {
        title: title,
        description: description,
      });
  
      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };
  
      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
  
  //更新数据
  async function putData() {
    let resultElement = document.getElementById("putResult");
    resultElement.innerHTML = "";
  
    const id = document.getElementById("put-id").value;
    const title = document.getElementById("put-title").value;
    const description = document.getElementById("put-description").value;
    const published = document.getElementById("put-published").checked;
  
    try {
      const res = await instance.put(`/tutorials/${id}`, {
        title: title,
        description: description,
        published: published
      });
  
      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };
  
      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
  //删除
  async function deleteAllData() {
    let resultElement = document.getElementById("deleteResult");
    resultElement.innerHTML = "";
  
    try {
      const res = await instance.delete("/tutorials");
  
      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };
  
      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
  //根据Id删除
  async function deleteDataById() {
    let resultElement = document.getElementById("deleteResult");
    resultElement.innerHTML = "";
  
    const id = document.getElementById("delete-id").value;
  
    try {
      const res = await instance.delete(`/tutorials/${id}`);
  
      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };
  
      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
  
  //清空各区数据
  function clearGetOutput() {
    document.getElementById("getResult").innerHTML = "";
  }
  
  function clearPostOutput() {
    document.getElementById("postResult").innerHTML = "";
  }
  
  function clearPutOutput() {
    document.getElementById("putResult").innerHTML = "";
  }
  
  function clearDeleteOutput() {
    document.getElementById("deleteResult").innerHTML = "";
  }